<template>
  <div class="app-container">
    <form-filter @on-filter="submitFilterForm"/>
    <el-table border :data="tableData.list" v-loading="loading" element-loading-text="加载中..." class="mgtop">
      <el-table-column label="会员账号" prop="target_account" align="center" width="120">
      </el-table-column>
      <el-table-column label="会员昵称" prop="target_nick" align="center" width="120">
      </el-table-column>
      <el-table-column label="会员类型" prop="target_type" align="center" width="120">
         <template slot-scope="{row}">
           {{row.target_type==0?'本站会员':(row.target_type==1?'外部拉取':'-')}}
        </template>
      </el-table-column>
      <el-table-column label="禁言开始时间" prop="time" align="center" width="220">
      </el-table-column>
      <el-table-column label="禁言时长" prop="ttl" align="center" >
        <template slot-scope="{row}">
          {{row.ttl_text}}
        </template>
      </el-table-column>
      <el-table-column label="禁言结束时间" prop="expire" align="center" width="220">
      </el-table-column>
      <el-table-column label="禁言类别" prop="cate" align="center" width="120">
      </el-table-column>
      <el-table-column label="操作人" prop="account" align="center" width="120">
      </el-table-column>
      <el-table-column label="历史禁言次数" prop="ban_count" align="center" width="120">
      </el-table-column>
      <el-table-column label="备注" prop="remark" align="center" width="220">
      </el-table-column>
       <el-table-column label="操作" prop="username" align="center" width="220" fixed="right">
        <template slot-scope="{row}">
          <el-button type="text" v-if="roleCheck('chatRoom-banned-table-detail')" @click="openDialog(row,'detail')">查看举报详情</el-button>
          <el-button type="text" v-if="roleCheck('chatRoom-banned-table-unban')" @click="openDialog(row,'unban')" >解禁</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="Number(tableData.total)">
      </el-pagination>
    </div>
<detailDialog
      :dialogVisible="DetailDialogVisible"
      v-if="DetailDialogVisible"
      :row-data="dialogData"
      @cancel="DetailDialogVisible = false"
    />
    <unBanDialog
      :value="UnbanDialogVisible"
      v-if="UnbanDialogVisible"
      :row-data="dialogData"
      @cancel="UnbanDialogVisible = false"
      @refresh="refresh"
    />
  </div>
</template>


<script>
import { getBannedUserList } from '@/services/api/chatRoom';
import FormFilter from './bannedFilter.vue';
import detailDialog from './dialog/detailDialog';
import unBanDialog from './dialog/unBanDialog';
import { grid } from '@/build';
import { unitTime } from '@/utils/base';

export default {
  name: 'bannedTable',
  components: { FormFilter, detailDialog, unBanDialog },
  mixins: [grid],
  props: ['value'],
  data() {
    return {
      tableData: {},
      auditStep: 0,
      rowData: {},
      DetailDialogVisible: false,
      UnbanDialogVisible: false,
      dialogData: '',
      filters: {
        page: 1,
        size: 20,
        start_time: moment().format('YYYY-MM-DD 00:00:00'),
        end_time: moment().format('YYYY-MM-DD 23:59:59'),
      },
      filterDateType: false,
    };
  },
  watch: {
    value(val) {
      if (val) {
        this.gridSearch();
      }
    },
  },
  methods: {
    unitTime,
    submitFilterForm(formInline) {
      const { time } = formInline;
      let start_time; let end_time;
      if (!_.isUndefined(time) && _.isArray(time)) {
        start_time = time[0];
        end_time = time[1];
        this.filters.start_time = start_time;
        this.filters.end_time = end_time;
        // formInline = { ...formInline, start_time, end_time };
      } else {
        this.filters.start_time = undefined;
        this.filters.end_time = undefined;
      }
      if (formInline.cate == '全部') { formInline.cate = ''; }
      this.filters = { ...this.filters, ...formInline };
      this.doGet({ action: 'getGrid' });
    },
    refresh() {
      this.doGet({ action: 'getGrid' });
    },
    openDialog(row, dialogType) {
      if (dialogType === 'detail') {
        this.DetailDialogVisible = true;
      } else {
        this.UnbanDialogVisible = true;
      }
      window.scrollTo(0, 0);
      this.dialogData = row;
    },
  },
  mounted() {
    this.bindGet(getBannedUserList, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
      afterSuccess: ([result, data]) => {
      },
      afterFail: () => {
        console.log('error');
      },
    });
    this.getAll();
  },
};
</script>

<style scoped>
.mgtop{margin-top:30px}
</style>
